<template>
  <div class="Banner3__layer"
       :class="{isMobile: editorDevice === 'mobile' ||  formData.showDevice === 'mobile'}"
       style="background-color: rgba(0, 0, 0, 0.6);position: absolute;"
       :style="{height: isPreview ? 'auto' : '100%', width: ((editorDevice === 'desktop' || editorDevice === 'all') &&  formData.showDevice !== 'mobile') ? '100%' : '375px', transform: ((editorDevice === 'desktop' || editorDevice === 'all')  &&  formData.showDevice !== 'mobile') ? 'none': 'scale(0.8)',paddingTop: formData.showLocation === 2 ? '44px' : 0, alignItems: formData.showLocation === 3 ? 'flex-end': 'flex-start'}">
    <div class="Banner3PcWrap" :class="[formData.bgStyle, formData.bgAlignment]"
         :style="{background: `url(${(editorDevice === 'mobile' || formData.showDevice === 'mobile') ? formData.mobileImageUrl : formData.imageUrl})  ${formData.baseMap1}`}">
      <div class="content">
      <div v-html="formData.popupTitle"></div>
      <div class="time">
        <div class="Banner3__coupon" :style="{color: formData.popupColor, borderColor: formData.popupColor}"
             v-if="formData.couponCodeText && formData.showCoupon">{{ formData.couponCodeText }}
        </div>
        <div class="Banner3__countdown" v-if="formData.showCount">
        <span style="color: rgb(255, 255, 255); background-color: rgb(225,9,9);"
              v-if="formData.fixedCountdownDay > 0">{{ getTimeStr(formData.fixedCountdownDay) }}</span>
          <span
              style="color: rgb(255, 255, 255); background-color: rgb(225, 9, 9);">{{
              getTimeStr(formData.fixedCountdownHour)
            }}</span>
          <span
              style="color: rgb(255, 255, 255); background-color: rgb(225, 9, 9);">{{
              getTimeStr(formData.fixedCountdownMinute)
            }}</span>
          <span
              style="color: rgb(255, 255, 255); background-color: rgb(225, 9, 9);">{{
              getTimeStr(formData.fixedCountdownSecond)
            }}</span>
        </div>
      </div>
        </div>
      <i @click="handleClose" class="jyfont card-col-close icon_custom Banner3__close-icon el-icon-close"
         style="color: rgb(255, 255, 255);"
         :style="{display: formData.btnChecked ? 'none': 'block'}"></i>
    </div>
    <div class="Banner3__nav_pc" v-if="!isPreview">
      <i
          class="jyfont card-tab-cebianlan icon_custom nav__left-icon"></i><i
        class="jyfont dj-logo icon_custom nav__logo">logo</i>
      <div class="nav__right-icon">
        <i class="jyfont card-tab-search icon_custom nav__search el-icon-search"></i><i
          class="jyfont hd-fill-center icon_custom nav__center el-icon-user-solid"></i><i
          class="jyfont bag-fill icon_custom_6fda nav__bag el-icon-s-goods"></i></div>
    </div>
    <div class="Banner3__mode_edit"></div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
    name: 'BulletinBoardCountDown',
    props: {
        formData: {
            type: Object,
            default: () => ({})
        },
        deviceName: {
            type: String,
            default: 'desktop'
        },
        isPreview: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        deviceName (newValue) {
            this.editorDevice = newValue;
        },
        editor (newValue) {
            this.editorDevice = newValue;
        }
    },
    data () {
        return {
            editorDevice: 'all'
        };
    },
    computed: {
        ...mapGetters({editor: 'editorDevice'})
    },
    methods: {
        getTimeStr (time) {
            if (time < 10) {
                return '0' + time;
            }
            return time;
        },
        handleClose () {
            this.$emit('close');
        }
    }
};
</script>

<style lang="scss" scoped>
.Banner3__layer {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-direction: column;

  .Banner3__nav_pc {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 44px;
    background-color: #8a8a8a;

    .nav__left-icon {
      color: #fff;
      margin-left: 12px;
    }

    .nav__logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
    }

    .nav__right-icon {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .nav__search, .nav__center, .nav__bag {
        margin-right: 20px;
        color: #fff;
      }
    }
  }

  .Banner3PcWrap {
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.2;
    text-align: center;
    color: #000;
    height: 68px;
    overflow: hidden;
    flex-direction: column;
    .content, .time {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .Banner3__coupon {
      margin-left: 20px;
      padding: 6px 30px;
      font-size: 14px;
      font-weight: bold;
      border: 2px solid #fff;
      border-radius: 20px;
    }

    .Banner3__countdown {
      margin-left: 20px;

      span {
        margin: 0 10px 0 0;
        display: inline-block;
        width: 40px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        color: #fff;
        background-color: #e10909;
        font-size: 18px;
        font-weight: bold;
        border-radius: 4px;
      }
    }

    .Banner3__close-icon {
      position: absolute;
      right: 20px;
      color: #fff;
      font-size: 10px;
      cursor: pointer;
    }
  }

  &.isMobile {
    .Banner3PcWrap {
      padding: 6px;
      flex-direction: column;
      .content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      .time{
        width: 100%;
      }

      .Banner3__coupon {
        padding: 5px 20px;
      }

      .Banner3__close-icon {
        top: 10px;
      }
      .Banner3__countdown{
        span {
          font-size: 16px;
          height: 26px;
          line-height: 26px;
        }
      }
    }
  }
}

.bg-selfAdaption {
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
}

.bg-fill {
  background-repeat: repeat !important;
  background-size: 100% auto !important;
}

.bg-stretching {
  background-repeat: repeat !important;
  background-size: 100% 100% !important;
}

.bg-tile {
  background-repeat: repeat !important;
  background-size: auto !important;
}

.bg-center {
  background-position: center center !important;
}

.bg-left-top {
  background-position: left top !important;
}

.bg-right-top {
  background-position: right top !important;
}

.bg-left-bottom {
  background-position: left bottom !important;
}

.bg-right-bottom {
  background-position: right bottom !important;
}
</style>

<style lang="scss">
.Template6__btn {
  p {
    margin: 0;
  }
}
.Banner3__layer{
  p{
    margin-top: 6px;
    margin-bottom: 0;
  }
}
</style>
